<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>fullpage</title>
  <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/index.min.css">

  <meta name="x5-orientation" content="portrait">
  <meta name="screen-orientation" content="portrait">
</head>

<body>
  <div class="audio_btn animated">
    <audio src="music/test.mp3" id="media" loop></audio>
  </div>
  <div class="pages">
    <div class="page page1">
      <ul>
        <li class="p1_message animated" animate="bounceInDown">
          <img class="" src="img/p1_message.jpg">
        </li>
        <li class="p1_words animated" animate="fadeIn">
          <img src="img/p1_words.png">
        </li>
      </ul>
    </div>
    <div class="page page2">
      <ul>
        <li class="p2_bg">
          <img src="img/p2_bg.png">
        </li>
        <li class="p2_words animated" animate="fadeIn">
          <img src="img/p2_words.png">
        </li>
      </ul>
    </div>
    <div class="page page3">
      <ul>
        <li class="p3_bg">
          <img src="img/p3_bg.png">
        </li>
        <li class="p3_words animated" animate="fadeInUp">
          <img src="img/p3_words.png">
        </li>
      </ul>
    </div>
    <div class="page page4">
      <ul>
        <li class="p4_ta animated" animate="fadeIn">
          <img src="img/p4_ta.png">
        </li>
        <li class="p4_bg animated" animate="fadeInRight">
          <img src="img/p4_bg.png">
        </li>
        <li class="p4_words animated" animate="fadeInRight">
          <img src="img/p4_words.png">
        </li>
      </ul>
    </div>
    <div class="page page5">
      <ul>
        <li class="p5_ta animated" animate="fadeIn">
          <img src="img/p5_ta.png">
        </li>
        <li class="p5_bg animated" animate="fadeInLeft">
          <img src="img/p5_bg.png">
        </li>
        <li class="p5_words animated" animate="fadeInLeft">
          <img src="img/p5_words.png">
        </li>
      </ul>
    </div>
    <div class="page page6">
      <ul>
        <li class="p6_bg animated" animate="bounceInUp">
          <img src="img/p6_bg.png">
        </li>
        <li class="p6_words animated" animate="fadeIn">
          <img src="img/p6_words.png">
        </li>
      </ul>
    </div>
    <div class="page page7">
      <ul>
        <li class="p7_bg1 animated" animate="fadeInRight">
          <img src="img/p7_bg1.png">
        </li>
        <li class="p7_bg2 animated" animate="fadeInLeft">
          <img src="img/p7_bg2.png">
        </li>
        <li class="p7_words1 animated" animate="fadeIn">
          <img src="img/p7_words1.png">
        </li>
        <li class="p7_words2 animated" animate="fadeIn">
          <img src="img/p7_words2.png">
        </li>
        <li class="p7_words3 animated" animate="fadeIn">
          <img src="img/p7_words3.png">
        </li>
      </ul>
    </div>
    <div class="page page8">
      <ul>
        <li class="p8_but animated" animate="bounceInDown">
          <img src="img/p8_but.png">
        </li>
        <li class="p8_bg animated" animate="lightSpeedIn">
          <img src="img/p8_bg.png">
        </li>
        <li class="p8_words animated" animate="zoomIn">
          <img src="img/p8_words.png">
        </li>
      </ul>
    </div>
    <div class="page page9">
      <ul>
        <li class="p9_bg1 animated" animate="fadeInLeft" duration="500">
          <img src="img/p9_bg1.png">
        </li>
        <li class="p9_bg2 animated" animate="fadeInRight">
          <img src="img/p9_bg2.png">
        </li>
        <li class="p9_words1 animated" animate="fadeInUp">
          <img src="img/p9_words1.png">
        </li>
        <li class="p9_words2 animated" animate="fadeInUp">
          <img src="img/p9_words2.png">
        </li>
      </ul>
    </div>
    <div class="page page10">
      <ul>
        <li class="p10_bg">
          <img src="img/p10_bg.png">
        </li>
        <li class="p10_words animated" animate="zoomIn">
          <img src="img/p10_words.png">
        </li>
      </ul>
    </div>
  </div>
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/main-v2.js"></script>
  <script type="text/javascript">
    var options = {
      container: "pages",
      unitPage: "page",
      currIndex: 0,
      callBack: function (index) {
        console.log("当前是第" + index + "页");
      },
      touchMoveEffect: true,
    }
    var MS = new MicroScene(options);
  </script>
</body>

</html>